<template>
    <div class="recent-weather">
        <div class="recent-weather-item">
            <div class="flex gap6" v-if="futureWeather && futureWeather.length">
                <!-- 使用v-for循环渲染 -->
                <div
                    class="flex flex-col flex-1 gap4"
                    v-for="item in futureWeather"
                    :key="item.date"
                >
                    <span>{{ getWeek(item.date) }}</span>
                    <span>{{ formatDate(item.date) }}</span>
                    <span>{{ item.dayweather }}</span>
                    <span>风力 {{ item.nightpower }}级</span>
                </div>
            </div>
            <div class="recent-weather-item" v-else>正在加载中...</div>
        </div>
        <WeatherLineChart />
    </div>
</template>
<script setup>
import WeatherLineChart from "./WeatherLineChart.vue";
import { ref, onMounted } from "vue";
import { formatDate } from "@/utils/format";
import useWeatherData from "@/utils/useWeather";

const { getFutureWeather } = useWeatherData();
const futureWeather = ref();

/**
 * 根据路由获取近期天气数据
 * 过来的路由：router.push(`/weather/${city.adcode}?search=${city.name}`)
 */
onMounted(async () => {
    futureWeather.value = await getFutureWeather();
});

// 获取星期
const getWeek = (date) => {
    if (!date || futureWeather.value.length === 0) return "";
    const week = ["日", "一", "二", "三", "四", "五", "六"];
    if (date === futureWeather.value[0].date) {
        return "今天";
    } else if (date === futureWeather.value[1].date) {
        return "明天";
    } else {
        return `周${week[new Date(date).getDay()]}`;
    }
};
</script>
<style scoped>
h2 {
    margin: 24px 0 0;
}
.recent-weather {
    margin: 8px 0 0;
    padding: 40px 48px 0;
    background-color: #004e71;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.recent-weather-item {
    transition: all 0.3s ease;
}
@media (max-width: 768px) {
    .recent-weather {
        padding: 20px 24px 0;
    }
    .flex.gap6 {
        flex-direction: column;
    }
}
</style>
